<template>
	<div>
		<!-- 悬浮控件 -->
		<div ref="floatingControlRef" class="floating-control" :class="{
        'is-dragging': isDragging,
        'is-snapped-bar': isSnappedRight && !isHovering && !isChatOpen, // 吸附时显示为条状
        'is-ball': !isSnappedRight || isHovering || isChatOpen // 其他情况显示为球形
      }" :style="controlStyle" @mousedown.prevent="handleMouseDown" @click="handleClick" @mouseover="handleMouseOver"
			@mouseleave="handleMouseLeave" :title="isChatOpen ? '' : 'AI助手'">
			<!-- 球内图标 (仅在球形状态下显示) -->
			<svg v-if="!isSnappedRight || isHovering || isChatOpen" xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24" fill="white" width="24px" height="24px">
				<path d="M0 0h24v24H0z" fill="none" />
				<path
					d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z" />
			</svg>
		</div>

		<!-- 聊天窗口 -->
		<transition name="chat-window-fade">
			<div v-if="isChatOpen" class="chat-window" :style="chatWindowStyle">
				<!-- 窗口头部 -->
				<div class="chat-header">
					<span>AI 智能助手</span>
					<button @click="closeChatWindow" class="close-button" title="关闭">×</button>
				</div>

				<!-- 消息区域 -->
				<div class="chat-messages" ref="messageContainerRef">
					<div v-for="(msg, index) in messages" :key="index" :class="['message', `message-${msg.role}`]">
						<!-- 添加加载指示器 -->
						<div v-if="msg.role === 'assistant' && msg.loading" class="loading-indicator">
							<span>思考中...</span>
						</div>
						<!-- 实际消息文本 -->
						<span v-else-if="msg.role === 'assistant'" v-html="msg.parsedContent"
							class="message-text"></span>
						<!-- User message (plain text) -->
						<span v-else class="message-text">{{ msg.content }}</span>
					</div>
				</div>

				<!-- 输入区域 -->
				<div class="chat-input">
					<textarea v-model="newMessage" @keydown.enter.prevent="sendMessage(newMessage)"
						placeholder="输入您的问题..." rows="2" :disabled="isLoading"></textarea>
					<button @click="sendMessage(newMessage)" :disabled="!newMessage.trim() || isLoading">
						{{ isLoading ? '发送中...' : '发送' }}
					</button>
				</div>
			</div>
		</transition>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onBeforeUnmount,
		nextTick
	} from 'vue';
	import {
		marked
	} from 'marked';
	import emitter from '@/utils/evenBus';

	// --- 配置 ---
	// !!! 警告: 切勿在生产环境的前端代码中直接暴露 API Key !!!
	// !!! Zhipu AI 需要 JWT 认证，通常在后端完成 !!!
	// 此处仅为演示结构，假设了一个简化的认证方式，很可能无法直接工作
	const ZHIPU_API_KEY = 'cfaa24d0c56e4c718cc853ee1c65e9b7.ASDTz6l3LYndA34J'; // 你的 API Key (ID.Secret 格式)
	const API_URL = 'https://open.bigmodel.cn/api/paas/v4/chat/completions';
	const MODEL_NAME = 'glm-4'; // 或者 'glm-3-turbo' 等 Zhipu 支持的模型

	// --- 响应式状态定义 ---

	// DOM 元素引用
	const floatingControlRef = ref(null); // 悬浮控件 (球或条) 的 DOM 引用
	const messageContainerRef = ref(null); // 聊天消息容器的 DOM 引用

	// 悬浮控件状态
	const isDragging = ref(false); // 是否正在拖动
	const isHovering = ref(false); // 鼠标是否悬停
	const isSnappedRight = ref(true); // 当前是否吸附在右侧边缘 (初始默认吸附)
	const wasDragging = ref(false); // 标记是否发生了拖拽（用于区分点击和拖拽结束）
	const isLoading = ref(false); // 是否正在请求 AI API

	// 控件位置 (使用 right 和 bottom 定位)
	const controlPosition = reactive({
		right: 10, // 初始右边距 (px) - 调整为更靠近边缘
		bottom: 20, // 初始底边距 (px)
	});

	// 拖动起始信息
	const dragStart = reactive({
		x: 0,
		y: 0,
		initialRight: 0,
		initialBottom: 0,
	});

	// 聊天窗口状态
	const isChatOpen = ref(false); // 聊天窗口是否打开

	// 聊天内容 (注意: role 使用 'user' 和 'assistant' 以匹配 API)
	const messages = ref([
		// Initialize with parsed content for the initial message
		{
			role: 'assistant',
			content: '你好！有什么可以帮助你的吗？',
			// Add a parsedContent property
			parsedContent: marked.parse('你好！有什么可以帮助你的吗？')
		},
	]);
	const newMessage = ref('');
	// 输入框中的新消息




	// --- 计算属性 ---

	// 动态计算悬浮控件的样式
	const controlStyle = computed(() => {
		// 吸附状态由 CSS 类控制，这里主要处理非吸附时的位置和拖动/悬停效果
		let transform = 'scale(1)';
		if (isHovering.value && (!isSnappedRight.value || isChatOpen)) {
			// 仅在球形状态下悬停放大
			transform = 'scale(1.1)';
		}

		// 默认过渡效果，拖动时取消
		const transition = isDragging.value ? 'none' : 'all 0.3s ease';

		return {
			right: `${controlPosition.right}px`,
			bottom: `${controlPosition.bottom}px`,
			transition: transition,
			transform: transform,
		};
	});

	// 动态计算聊天窗口的位置 (使其靠近悬浮控件)
	const chatWindowStyle = computed(() => {
		const controlElement = floatingControlRef.value;
		const controlHeight = controlElement ? controlElement.offsetHeight : 50; // 获取当前控件高度，默认为球的高度
		const baseBottomOffset = 15; // 窗口底部距离控件顶部的距离
		const baseRightOffset = 10; // 窗口右边距离控件右边的距离

		return {
			bottom: `${controlPosition.bottom + controlHeight + baseBottomOffset}px`,
			right: `${controlPosition.right + baseRightOffset}px`,
		};
	});


	// --- 事件处理方法 ---

	// 鼠标在悬浮控件上按下：准备开始拖动
	const handleMouseDown = (event) => {
		// 如果聊天窗口是打开的，并且点击发生在控件（球）上，不允许拖动，仅触发点击打开/关闭
		if (isChatOpen.value) {
			// 检查点击目标是否确实是控件本身，而不是聊天窗口的内容冒泡上来的
			if (event.target === floatingControlRef.value || floatingControlRef.value?.contains(event.target)) {
				// 可以选择在这里阻止拖动，或者让 handleClick 处理
			} else {
				return; // 如果点击的不是控件，则忽略
			}
		}

		isDragging.value = true;
		wasDragging.value = false; // 重置拖拽标记
		isSnappedRight.value = false; // 开始拖动时，解除吸附状态

		dragStart.x = event.clientX;
		dragStart.y = event.clientY;
		dragStart.initialRight = controlPosition.right;
		dragStart.initialBottom = controlPosition.bottom;

		document.addEventListener('mousemove', handleMouseMove);
		document.addEventListener('mouseup', handleMouseUp);
	};

	// 鼠标移动：处理拖动过程
	const handleMouseMove = (event) => {
		if (!isDragging.value) return;
		wasDragging.value = true;

		const dx = event.clientX - dragStart.x;
		const dy = event.clientY - dragStart.y;

		let newRight = dragStart.initialRight - dx;
		let newBottom = dragStart.initialBottom - dy;

		// --- 边界检查 ---
		const controlElement = floatingControlRef.value;
		if (!controlElement) return;

		// 使用 getBoundingClientRect 获取实际渲染尺寸，因为它可能在球和条之间变化
		const rect = controlElement.getBoundingClientRect();
		const controlWidth = rect.width;
		const controlHeight = rect.height;
		const viewportWidth = window.innerWidth;
		const viewportHeight = window.innerHeight;

		const edgeMargin = 10; // 距离屏幕边缘的最小间距

		// 限制右边距 (防止移出左/右屏幕)
		// right 的最大值是 viewportWidth - controlWidth - edgeMargin
		// right 的最小值是 edgeMargin (即离左边缘 edgeMargin)
		newRight = Math.max(edgeMargin, Math.min(newRight, viewportWidth - controlWidth - edgeMargin));

		// 限制底边距 (防止移出顶/底屏幕)
		newBottom = Math.max(edgeMargin, Math.min(newBottom, viewportHeight - controlHeight - edgeMargin));

		controlPosition.right = newRight;
		controlPosition.bottom = newBottom;
	};

	// 鼠标松开：结束拖动
	const handleMouseUp = () => {
		if (!isDragging.value) return;
		isDragging.value = false;

		document.removeEventListener('mousemove', handleMouseMove);
		document.removeEventListener('mouseup', handleMouseUp);

		// 只有在聊天窗口关闭时才执行吸附逻辑
		if (!isChatOpen.value) {
			checkAndApplySnapping();
		}
	};

	// 检查并应用边缘吸附 (仅在聊天关闭时生效)
	const checkAndApplySnapping = () => {
		if (isChatOpen.value) { // 如果聊天窗口打开，不吸附
			isSnappedRight.value = false;
			return;
		}

		const controlElement = floatingControlRef.value;
		if (!controlElement) return;

		const controlWidth = controlElement.offsetWidth; // 用 offsetWidth 获取布局宽度
		const snapThreshold = controlWidth * 1.5; // 触发吸附的阈值 (距离右边缘)
		const edgeOffset = 10; // 吸附后距离边缘的位置

		// 检查是否靠近右边缘
		if (controlPosition.right < snapThreshold) {
			isSnappedRight.value = true;
			controlPosition.right = edgeOffset; // 吸附到右侧指定偏移位置
		} else {
			isSnappedRight.value = false;
		}
	};

	// 鼠标移入悬浮控件
	const handleMouseOver = () => {
		isHovering.value = true;
	};

	// 鼠标移出悬浮控件
	const handleMouseLeave = () => {
		isHovering.value = false;
		// 鼠标移出后，如果之前是吸附状态且聊天窗口未打开，需要重新检查吸附
		if (!isChatOpen.value && !isDragging.value) { // 确保不在拖动中
			// 延迟检查，防止刚拖动完立即吸附回去
			setTimeout(() => {
				if (!isHovering.value) { // 再次确认鼠标确实已移开
					checkAndApplySnapping();
				}
			}, 100);
		}
	};

	// 点击悬浮控件：打开/关闭聊天窗口
	const handleClick = () => {
		// 如果刚刚结束的是一次拖拽，则不触发点击事件
		if (wasDragging.value) {
			wasDragging.value = false; // 重置标记
			return;
		}
		isChatOpen.value = !isChatOpen.value;

		// 打开或关闭窗口后，更新吸附状态
		if (isChatOpen.value) {
			isSnappedRight.value = false; // 打开窗口时，解除吸附状态，显示为球形
		} else {
			// 关闭窗口时，检查是否需要吸附
			checkAndApplySnapping();
		}
	};

	// 关闭聊天窗口 (通过窗口内部按钮)
	const closeChatWindow = () => {
		isChatOpen.value = false;
		// 关闭窗口后，检查是否需要吸附
		checkAndApplySnapping();
	};

	// --- API 相关方法 ---

	// 获取 AI 回复
	const fetchAiResponse = async (history) => {
		// !!! 再次警告：在前端生成 JWT 非常不安全 !!!
		// !!! Zhipu AI 的真实认证流程应在后端完成 !!!
		// 以下代码假设了一个简化的、不安全的认证方式，仅作演示

		// 准备请求头
		const headers = {
			'Content-Type': 'application/json',
			// 假设 Zhipu API 接受此格式，实际需要根据文档生成 JWT
			'Authorization': `Bearer ${ZHIPU_API_KEY}`
		};

		// 准备请求体
		const body = JSON.stringify({
			model: MODEL_NAME,
			messages: history, // 发送整个对话历史
			stream: false, // 使用同步调用
			// temperature: 0.75, // 可以按需添加其他参数
			// top_p: 0.9,
		});


		try {
			const response = await fetch(API_URL, {
				method: 'POST',
				headers: headers,
				body: body,
			});

			if (!response.ok) {
				// 处理 API 返回的错误信息
				const errorData = await response.json();
				console.error('API Error:', errorData);
				throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
			}

			const data = await response.json();

			// 检查返回的数据结构是否符合预期
			if (data.choices && data.choices.length > 0 && data.choices[0].message) {
				return data.choices[0].message.content; // 返回 AI 的回复内容
			} else {
				console.error('Invalid API response structure:', data);
				throw new Error('未能从API响应中获取有效回复');
			}
		} catch (error) {
			console.error('Fetch AI response failed:', error);
			throw error; // 将错误抛出，由调用者处理
		}
	};

	// 发送消息
	const sendMessage = async (text) => {
		// 接收到的 text 参数是字符串
		const contentToSend = text?.trim(); // 获取文本并去除首尾空格
		if (!contentToSend || isLoading.value) return; // 如果内容为空或正在加载，则不执行

		isLoading.value = true; // 设置为加载中状态

		// 1. 如果聊天窗口未打开，先打开它
		if (!isChatOpen.value) {
			isChatOpen.value = true;
			isSnappedRight.value = false; // 打开时解除吸附
			// 等待 DOM 更新后再执行后续操作，确保窗口可见
			await nextTick();
		}

		// 2. 将用户消息添加到消息列表
		const userMessage = {
			role: 'user',
			content: contentToSend // 使用 trim 后的内容
		};
		messages.value.push(userMessage);

		// 3. 如果是通过输入框发送的，清空输入框
		// 判断 text 是否等于 newMessage.value，如果是，说明是输入框触发的
		if (text === newMessage.value) {
			newMessage.value = ''; // 清空输入框
		}


		// 4. 滚动到底部以显示新消息
		scrollToBottom();

		// 5. 添加一个临时的加载中消息
		const loadingMessageIndex = messages.value.length; // 记录加载消息的位置
		messages.value.push({
			role: 'assistant',
			content: '', // 初始内容为空
			loading: true // 标记为加载中
		});
		scrollToBottom(); // 再次滚动，显示加载提示

		try {
			// 6. 准备发送给 API 的历史记录 (仅包含 role 和 content)
			const historyForApi = messages.value
				.filter(msg => !msg.loading) // 过滤掉临时的加载消息
				.map(({
					role,
					content
				}) => ({
					role,
					content
				})); // 提取所需字段

			// 7. 调用 API 获取回复
			const aiReply = await fetchAiResponse(historyForApi);

			// 8. 使用 marked 解析 AI 的回复 (Markdown -> HTML)
			const parsedAiReply = marked.parse(aiReply);

			// 9. 更新消息列表：用实际回复替换掉加载消息
			messages.value.splice(loadingMessageIndex, 1, {
				role: 'assistant',
				content: aiReply, // 保存原始 Markdown 文本
				parsedContent: parsedAiReply, // 保存解析后的 HTML
				loading: false // 移除加载状态
			});

		} catch (error) {
			console.error("处理 AI 响应时出错:", error);
			// 10. 处理 API 调用或解析错误：用错误提示替换加载消息
			messages.value.splice(loadingMessageIndex, 1, {
				role: 'assistant',
				content: errorMessage, // 显示预定义的错误文本
				parsedContent: errorMessage, // 错误消息直接显示，无需解析
				loading: false // 移除加载状态
			});
		} finally {
			isLoading.value = false; // 结束加载状态
			// 11. 再次滚动到底部，确保完整显示 AI 回复或错误消息
			scrollToBottom();
			// 可选：请求结束后让输入框重新获得焦点 (如果需要)
			// nextTick(() => {
			//   const textarea = document.querySelector('.chat-input textarea');
			//   textarea?.focus();
			// });
		}
	};



	// 滚动消息区域到底部
	const scrollToBottom = () => {
		nextTick(() => {
			const container = messageContainerRef.value;
			if (container) {
				container.scrollTop = container.scrollHeight;
			}
		});
	};

	marked.setOptions({
		gfm: true, // Enable GitHub Flavored Markdown
		breaks: true, // Convert single line breaks to <br>
		// You can add more options here if needed
	});

	// --- 事件总线处理 ---
	// 定义处理来自 analysis.vue 的事件的函数
	const handleSendToAI = (payload) => {
		console.log('接收到来自 analysis.vue 的数据:', payload);
		if (typeof payload === 'string' && payload.trim()) {
			// 直接调用 sendMessage 函数，并将接收到的 payload 作为消息内容
			sendMessage(payload);
		} else {
			console.warn('接收到的 payload 不是有效的字符串，已忽略:', payload);
		}
	};

	// --- 生命周期钩子 ---

	onMounted(() => {
		checkAndApplySnapping(); // 组件挂载后检查初始吸附状态
		// 监听来自 eventBus 的 'sendToAI' 事件
		emitter.on('sendToAI', handleSendToAI);
	});

	onBeforeUnmount(() => {
		document.removeEventListener('mousemove', handleMouseMove);
		document.removeEventListener('mouseup', handleMouseUp);
		// window.removeEventListener('resize', handleResize);
		// 移除事件总线监听器
		emitter.off('sendToAI', handleSendToAI);
	});

	// (可选) 处理窗口大小变化的函数
	// const handleResize = () => {
	//   checkAndApplySnapping();
	// };
</script>

<style scoped>
	/* 悬浮控件基础样式 */
	.floating-control {
		position: fixed;
		/* 固定定位 */
		z-index: 1001;
		/* 确保在聊天窗口之上 */
		cursor: pointer;
		/* 鼠标手型 */
		user-select: none;
		/* 防止拖动时选中文本 */
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		/* 防止内部内容溢出 */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		/* 阴影效果 */
		/* 过渡效果由 :style 中的 computed property 控制 */
	}

	/* 球形状态 */
	.floating-control.is-ball {
		width: 50px;
		height: 50px;
		background: linear-gradient(135deg, #4a90e2, #50e3c2);
		/* 渐变背景色 */
		border-radius: 50%;
		/* 圆形 */
		color: white;
	}

	/* 吸附时的条状状态 */
	.floating-control.is-snapped-bar {
		width: 8px;
		/* 条的宽度 */
		height: 60px;
		/* 条的高度 */
		background-color: #4a90e2;
		/* 蓝色背景 */
		border-radius: 4px;
		/* 圆角 */
		right: 0 !important;
		/* 强制贴紧右边 */
		transform: scale(1) !important;
		/* 吸附时取消悬停放大效果 */
	}

	/* 隐藏条状状态下的图标 */
	.floating-control.is-snapped-bar svg {
		display: none;
	}

	/* 拖动时的样式 */
	.floating-control.is-dragging {
		/* 可以添加拖动时的特殊样式，例如轻微放大或改变透明度 */
		opacity: 0.9;
		/* transform: scale(1.05); */
		/* transform 由 controlStyle 控制 */
	}


	/* 聊天窗口样式 */
	.chat-window {
		position: fixed;
		/* 固定定位 */
		z-index: 1000;
		/* 在悬浮控件之下 */
		width: 330px;
		/* 稍微加宽一点 */
		height: 480px;
		/* 稍微加高一点 */
		background-color: #ffffff;
		border: 1px solid #e0e0e0;
		border-radius: 12px;
		/* 更圆润的边角 */
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
		/* 更明显的阴影 */
		display: flex;
		flex-direction: column;
		/* 垂直布局 */
		overflow: hidden;
		/* 防止内容溢出 */
		font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
		/* 优先使用系统UI字体 */
	}

	/* 聊天窗口过渡动画 */
	.chat-window-fade-enter-active,
	.chat-window-fade-leave-active {
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.chat-window-fade-enter-from,
	.chat-window-fade-leave-to {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
		/* 从下方稍微缩小进入/离开 */
	}

	/* 聊天窗口头部 */
	.chat-header {
		padding: 12px 18px;
		/* 增加内边距 */
		background-color: #f9f9f9;
		/* 更浅的背景 */
		border-bottom: 1px solid #e8e8e8;
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		align-items: center;
		font-size: 16px;
		font-weight: 600;
		/* 稍粗的字体 */
		color: #2c3e50;
		/* 深蓝灰色 */
	}

	.close-button {
		background: none;
		border: none;
		font-size: 26px;
		/* 增大关闭按钮 */
		cursor: pointer;
		color: #aaa;
		padding: 0 5px;
		/* 增加点击区域 */
		line-height: 1;
		transition: color 0.2s ease;
	}

	.close-button:hover {
		color: #666;
	}

	/* 消息区域 */
	.chat-messages {
		flex-grow: 1;
		/* 占据剩余空间 */
		overflow-y: auto;
		/* 超出内容时显示滚动条 */
		padding: 18px;
		/* 增加内边距 */
		background-color: #fff;
		/* 确保背景色 */
	}

	/* 单条消息 */
	.message {
		margin-bottom: 15px;
		/* 增加消息间距 */
		display: flex;
		/* 使用 flex 布局控制对齐 */
		max-width: 88%;
		/* 消息最大宽度 */
	}

	.message-text {
		padding: 10px 15px;
		/* 增加内边距 */
		border-radius: 18px;
		/* 圆角更柔和 */
		line-height: 1.6;
		/* 改善阅读行距 */
		word-wrap: break-word;
		/* 长单词换行 */
		font-size: 14px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		/* 轻微阴影增加层次感 */
	}

	/* 用户消息样式 (注意类名更改) */
	.message-user {
		justify-content: flex-end;
		/* 用户消息靠右 */
		margin-left: auto;
		/* 推动到右侧 */
	}

	.message-user .message-text {
		background-color: #4a90e2;
		/* 蓝色背景 */
		color: white;
		border-bottom-right-radius: 6px;
		/* 右下角稍微直一点 */
	}

	/* AI 消息样式 (注意类名更改) */
	.message-assistant {
		justify-content: flex-start;
		/* AI 消息靠左 */
		margin-right: auto;
		/* 推动到左侧 */
	}

	.message-assistant .message-text {
		background-color: #f1f3f5;
		/* 浅灰色背景 */
		color: #343a40;
		/* 深灰色字体 */
		border-bottom-left-radius: 6px;
		/* 左下角稍微直一点 */
	}

	/* 加载指示器样式 */
	.loading-indicator {
		display: inline-block;
		padding: 10px 15px;
		border-radius: 18px;
		background-color: #f1f3f5;
		color: #868e96;
		/* 灰色字体 */
		font-size: 14px;
		font-style: italic;
		border-bottom-left-radius: 6px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.loading-indicator span::after {
		content: '...';
		display: inline-block;
		animation: loading-dots 1.4s infinite;
		width: 1.5em;
		/* 调整宽度以容纳点 */
		text-align: left;
	}

	@keyframes loading-dots {

		0%,
		20% {
			content: '.';
		}

		40% {
			content: '..';
		}

		60%,
		100% {
			content: '...';
		}
	}


	/* 输入区域 */
	.chat-input {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		padding: 12px 18px;
		/* 增加内边距 */
		border-top: 1px solid #e8e8e8;
		background-color: #f9f9f9;
		/* 输入区背景色 */
	}

	.chat-input textarea {
		flex-grow: 1;
		border: 1px solid #dde1e6;
		border-radius: 8px;
		/* 更圆润的边角 */
		padding: 10px 12px;
		resize: none;
		/* 禁止调整大小 */
		font-size: 14px;
		line-height: 1.5;
		margin-right: 12px;
		font-family: inherit;
		/* 继承父级字体 */
		max-height: 90px;
		/* 限制最大高度 */
		overflow-y: auto;
		/* 内容过多时滚动 */
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.chat-input textarea:focus {
		outline: none;
		border-color: #4a90e2;
		/* 聚焦时边框变蓝 */
		box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
	}

	.chat-input textarea:disabled {
		background-color: #f1f3f5;
	}

	.chat-input button {
		padding: 9px 18px;
		/* 调整按钮大小 */
		background-color: #4a90e2;
		color: white;
		border: none;
		border-radius: 8px;
		/* 更圆润的边角 */
		cursor: pointer;
		font-size: 14px;
		font-weight: 500;
		transition: background-color 0.2s ease, opacity 0.2s ease;
		white-space: nowrap;
		/* 防止文字换行 */
	}

	.chat-input button:hover:not(:disabled) {
		background-color: #3a7bc8;
		/* 悬停时颜色变深 */
	}

	.chat-input button:disabled {
		background-color: #a0c7e8;
		/* 禁用时颜色变浅 */
		cursor: not-allowed;
		opacity: 0.7;
	}

	/* 滚动条美化 (可选) */
	.chat-messages::-webkit-scrollbar {
		width: 7px;
	}

	.chat-messages::-webkit-scrollbar-thumb {
		background-color: #ced4da;
		/* 更柔和的滚动条颜色 */
		border-radius: 4px;
	}

	.chat-messages::-webkit-scrollbar-track {
		background-color: #f1f3f5;
		/* 轨道颜色 */
	}

	.message-text :deep(p) {
		/* Style paragraphs inside message text */
		margin-bottom: 0.5em;
		/* Add some space between paragraphs */
	}

	.message-text :deep(p):last-child {
		margin-bottom: 0;
	}

	.message-text :deep(code) {
		/* Style inline code */
		background-color: #e9ecef;
		padding: 0.2em 0.4em;
		border-radius: 3px;
		font-size: 85%;
	}

	.message-text :deep(pre) {
		/* Style code blocks */
		background-color: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 4px;
		padding: 1em;
		overflow-x: auto;
		/* Allow horizontal scrolling for long code */
		font-size: 85%;
	}

	.message-text :deep(pre code) {
		/* Reset inline code style within pre */
		background-color: transparent;
		padding: 0;
		border-radius: 0;
		font-size: inherit;
	}

	.message-text :deep(ul),
	.message-text :deep(ol) {
		padding-left: 1.5em;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}
</style>